<template>
  <div class="group_btn">
    <div class="item" @click="spike">
      <img :src="require('../../../assets/img/b5.png')" alt />
      <p>限时秒杀</p>
    </div>
    <div class="item">
      <img :src="require('../../../assets/img/b4.png')" alt />
      <p>畅销商品</p>
    </div>
    <div class="item">
      <img :src="require('../../../assets/img/b1.png')" alt />
      <p>品质大牌</p>
    </div>
    <div class="item">
      <img :src="require('../../../assets/img/b2.png')" alt />
      <p>小U自营</p>
    </div>
    <div class="item">
      <img :src="require('../../../assets/img/b3.png')" alt />
      <p>积分商城</p>
    </div>
  </div>
</template>
<script>
import { reqspike } from "../../../http/http";
export default {
  methods: {
    data() {
      return {
        // 初始化数组
        spike: []
      };
    },
    // 点击限时秒杀---->发请求
    spike() {
      reqspike().then(res => {
        this.spike = res.data.list ? res.data.list : [];
        this.$router.push("/list");
      });
    }
  }
};
</script>

<style scoped>
.group_btn {
  width: 100vw;
  height: 1.22rem;
  display: flex;
  justify-content: space-evenly;
}
.group_btn .item {
  flex: 1;
  padding: 0.2rem;
  text-align: center;
}
.group_btn .item img {
  width: 0.5rem;
  height: 0.5rem;
}
.group_btn .item p {
  font-size: 0.22rem;
  margin-top: 0.08rem;
}
</style>